<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="blog.anchen8.net" />
<style type="text/css">
* {
	padding: 0px;
	margin: 0px;
}
div {
	margin: 20px 0;
	width: 200px;
	height: 50px;
	position: relative;
	top: 0px;
	left: -100px;
	background: rgba(100, 185, 52, 0.8);
}
</style>
<script type="text/javascript">
	window.onload = function() {
		var sidebar = document.getElementsByTagName("div");
		for (var i = sidebar.length - 1; i >= 0; i--) {
			sidebar[i].timer = null;
			sidebar[i].startforward = function(a) {
				var sidebar = this;
				clearTimeout(sidebar.timer);
				sidebar.timer = setInterval(function() {
					var b = (a - sidebar.offsetLeft) / 10;
					b = b > 0 ? Math.ceil(b) : Math.floor(b);
					if (sidebar.offsetLeft == a) {
						clearTimeout(sidebar.timer);
					} else {
						sidebar.style.left = sidebar.offsetLeft + b + "px";
					}
				}, 30);
			}
			sidebar[i].onmouseover = function(e) {
				e.preventDefault();
				this.startforward(0);
			}
			sidebar[i].onmouseout = function(e) {
				e.preventDefault();
				this.startforward(-100);
			}
		};
	}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
